<template>
  <div id="play-info" :class="[ showPlayModal ? 's-modal' : 'h-modal' ]">
    <!-- 收缩按钮 -->
    <div class="shrink font-20">
      <a-icon type="down" class="mleft-20 pointer" @click="$emit('controlModal', false)" />
    </div>
    <!-- 歌曲信息 -->
    <div class="music-info">
      <div class="music-title font-22">{{ songInfo.songName }}</div>
      <div class="music">
        <div class="mright-5 all-singer" @click="goSingerDetail">
          <span
            v-for="item in songInfo.singerName"
            :key="item.id"
            :data-id="item.id"
            class="pointer"
          >{{ item.name }}</span>
        </div>
        -
        <span class="pointer mleft-5" @click="$emit('goAlbum')">{{ songInfo.songName }}</span>
      </div>
      <!-- 歌词信息 -->
      <lyric-view :recordImg="songInfo.songImg" />
      <!-- 歌曲评论 -->
      <Discuss
        ref="discuss"
        class="mtop-20"
        style="width: 70%;"
        :newComments="comment"
        :newTotal="total"
        @scrollTo.passive="scroll"
      />
      <!-- 返回顶部 -->
      <w-go-top :target="getDOM" />
    </div>
  </div>
</template>

<script>
import GoTop from '@/components/Library/GoTop';
import LyricView from '@/components/LyricView';
import Discuss from '../Discuss';
import { musicComment } from '@/api/detail';
import { mapState } from 'vuex';

export default {
  name: 'PlayInfo',

  components: {
    LyricView,
    Discuss,
    WGoTop: GoTop
  },

  props: {
    // 控制playInfo组件显示隐藏
    showPlayModal: {
      type: Boolean,
      default: false
    },
    // 获取当前播放歌曲信息
    songInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    // 播放总时长
    dTime: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      total: 0,
      comment: [],
      // 音乐评论参数
      musicArgs: {
        id: undefined,
        limit: 20,
        offset: 0,
        // before: 0,
        timestamp: new Date().getTime()
      },
    };
  },

  computed: {
    isHidden() {
      if (this.showPlayModal) {
        return false;
      }
      return true;
    },
    getDiscuss() {
      return this.$refs.discuss;
    },
    ...mapState({
      isPlayed: state => state.main.isPlayed
    })
  },

  watch: {
    dTime: {
      handler(value) {
        if (!value) return;
        this.musicArgs.id = this.songInfo.id;
        this.getDiscuss.params.type = 0;
        this.getDiscuss.params.id = this.songInfo.id;
        // 获取精彩评论
        this.getDiscuss.getHotComments();
        this.getMusicComment();
        // 获取歌词信息
        this.$store.dispatch('detail/getLyric', this.songInfo.id);
      }
    }
  },

  methods: {
    getDOM() {
      return document.querySelector('.music-info');
    },
    async getMusicComment() {
      const res = (await musicComment(this.musicArgs)).data;
      console.log(res);
      this.comment = Object.freeze(res.comments);
      this.total = res.total;
    },
    scroll(current) {
      this.musicArgs.offset = (current - 1) * this.musicArgs.limit;
      this.getMusicComment();
      const detail = document.querySelector('.music-info');
      const lastDOM = this.$refs.discuss.$el.childNodes;
      detail.scrollTo({
        left: 0,
        top: lastDOM[lastDOM.length - 1].lastChild.offsetTop - 70,
        behavior: 'smooth'
      })
    },
    // 跳转歌手详情
    goSingerDetail(event) {
      const { id } = event.target.dataset;
      this.$router.push({
        name: 'artistdetail',
        query: { id }
      });
      // 点击跳转需要隐藏modal
      this.$emit('controlModal', false);
    }
  }, 
};
</script>

<style lang="less" scoped>
#play-info {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background: #f8f6f7;
  z-index: 999;
  .shrink {
    height: 60px;
    line-height: 60px;
  }
  .music-info {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    overflow-y: scroll;
    .music {
      display: flex;
      align-items: center;
      color: #b9b2b2;
      span:hover {
        color: #2e2ecd;
      }
      .all-singer>span::after {
        content: '/';
        display: inline-block;
      }
      .all-singer>span:last-child:after {
        display: none;
      }
    }
  }
}
.h-modal {
  transform: translateY(100vh);
  transition: all .4s;
}
.s-modal {
  transform: translateY(0);
  transition: all .4s;
}
</style>